
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>员工列表</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .xs-img-thumbnail {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <!--<div class="container-fluid">-->
    <div class="container">
        <!-- 做当视窗的大小小于 768px 时，把导航栏收缩起来的样式 -->
        <div class="navbar-header">
            <!-- 整个导航栏收缩后形成的一个按钮 -->
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#my_nav">
                <span class="sr-only">针对特殊设备</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <!--<span class="glyphicon glyphicon-search"></span>-->
            </button>
            <!-- 如果想显示品牌的图片，这里可以把文件替换成 img src="图片位置" -->
            <a href="#" class="navbar-brand">品牌LOGO</a>
        </div>



    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <button class="btn btn-primary" data-toggle="modal" data-target="#add_emp_modal">添加</button>
            <button class="btn btn-success" id="deleteAll">删除所有</button>
        </div>
        <div class="col-md-10 text-right">
            <form class="form-inline" id="searchForm" action="/springmvc-task4/emp/search" method="post" >
                <div class="form-group">
                    <div class="input-group">
                        <!-- 自定义搜索框的宽度：请自行在 form-control样式后添加 width -->
                        <input type="text" class="form-control" name="search" placeholder="请输入要查询员工姓名"
                               style="width: 300px;" value="">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" id="searchBtn"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 添加一条水平分割线 -->
    <hr/>
    <div class="row">
        <div class="col-md-12">
            <form name="listEmpForm">
            <table class="table table-bordered table-striped table-hover" id="listTable">
                <tr>
                    <th>
                        <!-- 复选框 -->
                        <input type="checkbox" name="select-all" id="select-all" value="all">
                    </th>
                    <th>姓名</th>
                    <th>编号</th>
                    <th>性别</th>
                    <th>电话号话</th>
                    <th>出生日期</th>
                    <th>操作</th>
                </tr>

                    <tr >
                        <td> <!-- 复选框 -->
                            <input type="checkbox" name="flags" value="1">
                        </td>
                        <td>tom</td>
                        <td>111</td>
                        <td>男</td>
                        <td>129</td>
                        <td>2021-11-11</td>
                        <td>
                            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#upd_emp_modal"
                                            emp_id="1">更新</a>
                            <a href="javascript:void(0);" class="btn btn-danger" emp_id="1">删除</a>
                        </td>
                    </tr>

            </table>
            </form>
        </div>
    </div>
</div>

<!-- 添加 模态框代码 -->
<div class="modal fade"  id="add_emp_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 模态框头部定义 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加员工</h4>
            </div>
            <!--体部定义-->
            <div class="modal-body">
                <!-- 表单定义 -->
                <form action="#" name="addEmpForm" method="post" class="form-horizontal"
                            enctype="multipart/form-data">
                    <div class="form-group has-success has-feedback">
                       <!-- <label class="col-md-1 control-label sr-only">图书名:</label>-->
                        <div class="col-md-6">
                            <input type="text" name="name" class="form-control" placeholder="员工姓名">
                            <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-6">
                            <label class="control-label" tip="name"></label>
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-5">
                            <input type="text" name="empNo" class="form-control" placeholder="员工编号">
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-offset-1 col-md-6">
                            <label class="control-label" tip="empNo"></label>
                        </div>
                    </div>

                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-8" >
                            <label class="checkbox-inline">
                                <input type="radio" name="gender"  value="1" checked> 男
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="gender"   value="0"> 女
                            </label>
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-6">
                            <input type="text" name="telephone" class="form-control" placeholder="电话">
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-6">
                            <label class="control-label" tip="telephone"></label>
                        </div>
                    </div>

                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-5">
                            <input type="date" name="birthday" class="form-control" placeholder="出生日期" >
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-6">
                            <label class="control-label" tip="birthday"></label>
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addModal_Btn">添加</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 更新图书信息的模态框 -->
<div class="modal fade"  id="upd_emp_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 模态框头部定义 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">更新员工信息</h4>
            </div>
            <!--体部定义-->
            <div class="modal-body">
                <!-- 表单定义 -->
                <form action="#" name="updEmpForm" method="post" class="form-horizontal">
                    <div class="form-group has-success has-feedback">
                        <!-- <label class="col-md-1 control-label sr-only">图书名:</label>-->
                        <div class="col-md-6">
                            <input type="hidden" name="id" class="form-control" >
                            <input type="text" name="name" class="form-control" placeholder="姓名" value="当你学会独处时">
                            <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-6">
                            <label class="control-label"></label>
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-5">
                            <input type="text" name="empNo" class="form-control" placeholder="员工编号" value="周国平">
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-offset-1 col-md-6">
                            <label class="control-label"></label>
                        </div>
                    </div>

                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-8" >
                            <label class="checkbox-inline">
                                <input type="radio" name="gender" id="man" value="1" checked> 男
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="gender"  id="women" value="0"> 女
                            </label>
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                    </div>

                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-6">
                            <input type="text" name="telephone" class="form-control" placeholder="电话" value="118">
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                        <div class="col-md-6">
                            <label class="control-label"></label>
                        </div>
                    </div>

                    <div class="form-group has-success has-feedback">
                        <!--<label class="col-md-1 control-label sr-only">作者:</label>-->
                        <div class="col-md-5">
                            <input type="date" name="birthday" class="form-control" placeholder="出生日期" value="2020-01-23">
                            <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
                        </div>
                    </div>



                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updModal_Btn">更新</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 导入js文件 -->
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>

<script>
</script>

</body>
</html>